<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0">分类管理</h4>
        <button class="btn btn-primary" onclick="showAddModal()">添加分类</button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="categoryList">
                    <!-- 分类列表将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加/编辑分类的模态框 -->
<div class="modal fade" id="categoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">添加分类</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="categoryForm">
                    <input type="hidden" id="categoryId">
                    <div class="mb-3">
                        <label for="categoryName" class="form-label">分类名称</label>
                        <input type="text" class="form-control" id="categoryName" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveCategory()">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    loadCategories();
});

function loadCategories() {
    $.get('${pageContext.request.contextPath}/admin/category/api/list', function(response) {
        if (response.code === 200) {
            var categories = response.data;
            var html = '';
            categories.forEach(function(category) {
                html += '<tr>';
                html += '<td>' + category.id + '</td>';
                html += '<td>' + category.categoryName + '</td>';
                html += '<td>';
                html += '<button class="btn btn-sm btn-warning me-1" onclick="showEditModal(' + category.id + ', \'' + category.categoryName + '\')">编辑</button>';
                html += '<button class="btn btn-sm btn-danger" onclick="deleteCategory(' + category.id + ')">删除</button>';
                html += '</td>';
                html += '</tr>';
            });
            $('#categoryList').html(html);
        }
    });
}

function showAddModal() {
    $('#modalTitle').text('添加分类');
    $('#categoryId').val('');
    $('#categoryName').val('');
    $('#categoryModal').modal('show');
}

function showEditModal(id, name) {
    $('#modalTitle').text('编辑分类');
    $('#categoryId').val(id);
    $('#categoryName').val(name);
    $('#categoryModal').modal('show');
}

function saveCategory() {
    var id = $('#categoryId').val();
    var name = $('#categoryName').val();

    var url = id ?
        '${pageContext.request.contextPath}/admin/category/api/update' :
        '${pageContext.request.contextPath}/admin/category/api/add';

    var method = id ? 'PUT' : 'POST';

    var data = {
        id: id || null,
        categoryName: name
    };

    $.ajax({
        url: url,
        type: method,
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            if (response.code === 200) {
                $('#categoryModal').modal('hide');
                loadCategories();
            } else {
                alert(response.message);
            }
        },
        error: function() {
            alert('操作失败，请稍后重试');
        }
    });
}

function deleteCategory(id) {
    if (confirm('确定要删除这个分类吗？')) {
        $.ajax({
            url: '${pageContext.request.contextPath}/api/category/' + id,
            type: 'DELETE',
            success: function(response) {
                if (response.code === 200) {
                    loadCategories();
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr) {
                // 处理错误响应
                if (xhr.responseJSON) {
                    alert(xhr.responseJSON.message);
                } else {
                    alert('删除失败，请稍后重试');
                }
            }
        });
    }
}
</script>
